<template>
  <!-- 待办页面，可通过传参数跳转与查询：
    /desk/todo?gradeName=四年级&yearly=2021&term=2021年下学期&tenantId=435309&keyword=张三&doneType=done&todoType=warn
    tenantId为指定租户；doneType=done代表查询已完成，undone代表未完成；todoType=warn代表查询学生预警，evaluation代表查询学生测评。
    specialTypeId是否专项测试，'1'=是，'0'=否；keyword代表查询姓名或班级，其它为接口参数 -->
  <basic-container>
    <!-- 待办类型 -->
    <el-tabs v-model="activeNames">
      <el-tab-pane v-for="item of todoList" :key="item.key" :name="item.key">
        <!-- 标题 -->
        <span slot="label">
          {{ item.name }}
          <!-- <el-badge :value="item.qty || 0"></el-badge> -->
        </span>
        <!-- 内容表格 -->
        <Content
          :key="item.key"
          v-if="inited && showStatus[item.key]"
          v-show="item.key === activeNames"
          :curUserInfo="curUserInfo"
          :activeNames="item.key"
        />
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>

<script>
import { getTodoDetails, getColumns } from "./todo/config.js";
import Content from "./todo/content.vue";
import { mapGetters } from "vuex";
import { getTermListAll } from "@/api/system/semester";
import { uniqBy } from "lodash-es";
import { findNoReleaseFinishTestNum } from "@/api/report/report";

export default {
  components: { Content },
  data() {
    return {
      inited: false,
      activeNames: "", // 当前选中的类型
      showStatus: {}, // 显示状态，是否已经显示过
      curUserInfo: {}, // 当前用户信息
      childData: {}, // 待办详情数据，数据结构：{key1: {undone:{qty: 10, columns: [], data: []}, done: {qty: 100, columns: [], data: []}}}
      conditionOp: {}, // 条件区域的配置，数据结构：{key1: [{type: 'select', selectOptions: [], showSelectPop:false}]}
      curHandleData: null, // 当前处理的待办数据
      yearlyList: [],
      semesterList: [],
      yearly: "",
      half: "",
      termId: "",
      query: {},
      num: 0,
    };
  },
  computed: {
    ...mapGetters(["permission", "todoData", "userInfo"]),
    permissionList() {
      return {
        viewBtn: this.vaildData(this.permission.todo_view, false),
      };
    },
    // 待办类型
    todoList() {
      let arr = (this.todoData && this.todoData["data"]) || [];
      // 默认选择第一个
      if (arr && arr.length && !this.isExistKey(this.activeNames, arr)) {
        let todoType = this.$route.query.todoType; // 支持查默认待办类型（测评/预警对应evaluation/warn）
        this.activeNames =
          (todoType && this.isExistKey(todoType, arr) && todoType) ||
          arr[0]["key"];
      }
      console.log(arr);
      return arr;
    },
  },
  watch: {
    // 待办类型的变化
    activeNames(newVal) {
      if (!newVal || !this.isExistKey(newVal)) return;
      this.showStatus[newVal] = true;
      this.collapseChange(newVal);
    },
  },
  async created() {
    // 初始化用户数据
    this.$store
      .dispatch("GetNewUserInfo", { userId: this.userInfo.userId })
      .then((user) => {
        this.curUserInfo = user;
        this.inited = true;
      });
    let tenantId = JSON.parse(window.localStorage.getItem("saber-userInfo"))
      .content.tenantId;
    await getTermListAll(1, 1000, {}).then((result) => {
      var _this = this; //注意！一定要重新定义一下this指向
      let res18DataList = result.data.data;
      for (let zz = 0; zz < res18DataList.length; zz++) {
        let item = res18DataList[zz];
        _this.yearlyList.push(item);
        _this.semesterList.push(item);
        if (item.currentFlag == "Y") {
          _this.termId = item.termId;
          _this.yearly = item.yearly;
        }
      }
      _this.yearlyList = uniqBy(_this.yearlyList, "yearly");
      _this.semesterList = uniqBy(_this.semesterList, "termId");

      this.query = {
        tenantId: tenantId,
        termId: this.termId,
        yearly: this.yearly,
      };
    });

    await findNoReleaseFinishTestNum(this.query).then((res) => {
      this.num = res.data.data[0].num;
    });
  },
  methods: {
    // 待办大类型切换回调
    collapseChange(activeNames) {
      if (!this.isExistKey(activeNames)) {
        return;
      }
      // 判断没有获取到当前面板的数据，则调用接口获取数据
      if (!this.childData[activeNames]) {
        this.initConditions(activeNames); // 根据选择的待办类型，初始化对应的搜索条件
      }
    },
    // 根据待办类型，刷新对应待办详情
    // async refreshTodoDetails (activeNames, curConditions) {
    //   let data = await getTodoDetails(this.userInfo, activeNames, curConditions) // 根据当前点击的待办类型获取待办详情
    //   if (data) {
    //     this.childData[activeNames] = data
    //     // 未完成需要显示的字段
    //     this.childData[activeNames]['undone']['columns'] = getColumns(this.curUserInfo, activeNames, 'undone')
    //     // 已完成需要显示的字段
    //     this.childData[activeNames]['done']['columns'] = getColumns(this.curUserInfo, activeNames, 'done')
    //     console.log('单个类型的待办内容', activeNames, this.childData, this.conditionOp)
    //   }
    // },
    // 根据选择的待办类型，初始化对应的搜索条件
    initConditions(activeNames) {
      this.conditionOp[activeNames] = [];
    },
    // 校验key是不是正确的存在
    isExistKey(key, arr = this.todoList) {
      return !!arr.find((r) => key === r["key"]);
    },
  },
};
</script>

<style scoped>
/deep/ sup {
  top: 0;
}
</style>
